/**
 * @description 公共样式
 * @author simon@sayto.top
 * @date 2019-12-17
 */

@import "./_var.scss";

/* css reset */
input,textarea,select{
  font-family:arial;
  font-family:inherit;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline}
ul,ol{
  padding-left:0;
  list-style-type:none;
}
div,span,i,a,label,button,h1, h2, h3, h4, h5, h6,nav,video,table,caption, tbody, tfoot, thead, tr, th, td{
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
/*image with no-border*/
a img{border:0;}
img{border:0;}
html,body {
  height: 100%;
  margin: 0;
}
body{
  font-family: '微软雅黑', '华文细黑', 'Helventica',Tahoma,Arial !important;
  line-height:1.4;
  color:#333;
  background:transparent;
}
a{
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
button,select,input,textarea{outline: none}
button{
  cursor: pointer;
  &[disabled]{
    cursor: not-allowed !important;
    opacity: .9;
  }
  &:hover{
    opacity: .9;
  }
}


/* 分离样式 */
/* display */
.dn{display:none;}
.di{display:inline;}
.db{display:block;}
.dib{display:inline-block;}
/* box-sizing */
.bsb{box-sizing: border-box;}
/* 浮动 */
.l{float: left;}
.r{float: right;}
/* 宽度百分比 */
.wp100{width: 100%;}
/* position */
.por{position: relative;}
.poa{position: absolute;}
/* text-align */
.tal {text-align: left;}
.tac {text-align: center;}
.tar {text-align: right;}
/* clear float */
.clf{*zoom: 1}
.clf::after{
  content: "";
  display: block;
  clear: both;
}

/* 颜色 */
.fc0{color: #333;}
.fcf{color:#fff;}
.fc-main{color: $color-main}
.bc0{background-color: #000;}
.bcf{background-color: #fff;}
.bc-tran{background-color: transparent}
.bc-main{background-color: $color-main;}

/* 隐藏滚动条 */
.no-scroll-bar{
  &::-webkit-scrollbar{
    display: none;
    width: 0;
  }
}


/* 居中 */
.mc {position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)}

/* margin padding */
@for $i from 0 through 30 {
  .m#{$i} {
    margin: $i * 1px; /* no */
  }
  .ml#{$i} {
    margin-left: $i * 1px; /* no */
  }
  .mr#{$i} {
    margin-right: $i * 1px; /* no */
  }
  .mt#{$i} {
    margin-top: $i * 1px; /* no */
  }
  .mb#{$i} {
    margin-bottom: $i * 1px; /* no */
  }
  .p#{$i} {
    padding: $i * 1px; /* no */
  }
  .pl#{$i} {
    padding-left: $i * 1px; /* no */
  }
  .pr#{$i} {
    padding-right: $i * 1px; /* no */
  }
  .pt#{$i} {
    padding-top: $i * 1px; /* no */
  }
  .pb#{$i} {
    padding-bottom: $i * 1px; /* no */
  }
}

.no-data{
  font-size: 14px;
  padding: 100px 0;
  color: #333;
  text-align: center;
  &:empty::before{
    content: '暂无数据，下拉以刷新数据';
  }
}
// 一个表示加载中的简单小动画，3个点依次显示
.dota {
  display: inline-block;
  height: 1em; line-height: 1;
  text-align: left;
  vertical-align: -.25em;
  overflow: hidden;
}
.dota::before {
  display: block;
  content: '...\A..\A.';
  white-space: pre-wrap;   /* 也可以是white-space: pre */
  animation: dot 3s infinite step-start both;
}
@keyframes dot {
  33% { transform: translateY(-2em); }
  66% { transform: translateY(-1em); }
}
